<template>
  <div :id="'mapbox'+this.id" class="mapbox"></div>
</template>
<script>
  export default  {
    props:{
      id:{
        type:String,
        default:""
      },
      lan:{
        type:Number,
        default:115.420178
      },
      lgt:{
        type:Number,
        default:25.070267
      }
    },
    data(){
      return {
        map:null
      }
    },
    mounted() {
      // 百度地图初始化, 把百度地图渲染到你指定的div容器位置
      this.map = new BMap.Map("mapbox"+this.id);
      // 百度地图会根据你指定的经度和纬度进行定位渲染
      var ponit = new BMap.Point(this.lan,this.lgt);
      // 百度地图初始化的缩放比例 1~15
      this.map.centerAndZoom(ponit,11);
      // 是否支持百度地图滚轮的放大的缩小
      this.map.enableScrollWheelZoom(true);
      // 给百度地图绑定点击事件。获取当前点击的位置（包括经纬度）
      this.map.addEventListener('click', e =>{
        // 点击地图，触发一个父事件
        this.$emit("select",e);
      });
    }
  }
</script>
<style>
/*百度地图一定要设置高度和宽度，否则不会显示出来*/
.mapbox {
  width: 100%;
  height: 400px;
}
</style>
